<template>
	<div id="app">
		<iMenu accordion :active-name="activeName">
			<MenuItem name="/SizeObserverEG" to="/SizeObserverEG">元素大小监听</MenuItem>
		</iMenu>
		<div class="head">
			<div style="text-align:center;padding:0 15px;">
				<div>移动端</div>
				<iSwitch key="Mobile" :value="mobile" @input="$emit('update:mobile',$event)" size="small"/>
			</div>
		</div>
		<router-view class="body"/>
	</div>
</template>

<script>
	import Vue from 'vue';
	import VueRouter from 'vue-router';
	Vue.use(VueRouter);
	const router = new VueRouter({
		routes:[
			{path:'/SizeObserverEG',component:() => import('./doc/SizeObserverEG.vue')}
		]
	});
	export default{
		name:'Mobile',
		router,
		props:{
			mobile:Boolean
		},
		data(){
			return {
				activeName:''
			};
		},
		created(){
			console.log('Mobile');
			this.$router.afterEach((to,from) => {
				this.activeName=to.path;
			});
		}
	};
</script>

<style lang="scss">

</style>
